<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候鸟旅行推荐</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            cursor: pointer;
        }
        
        input[type="text"] {
            outline: none;
            /* border: 0; */
            margin-left: 8px;
            /* background: red; */
            height: 22px;
        }
        
        main .item_list {
            clear: both;
            box-sizing: border-box;
            width: 100%;
            height: 103px;
            border-top: 1px dotted #ccc;
        }
        /* main   .item_list * {
            border: 1px solid red;
        }
         */
        
        main .item_list li {
            position: relative;
            margin-top: 12px;
            margin-left: 6px;
            box-sizing: border-box;
            float: left;
            width: 146px;
            height: 78px;
        }
        
        .item_list li a img {
            box-sizing: border-box;
            width: 100%;
        }
        
        .likes {
            position: absolute;
            top: 60%;
            right: 0;
            width: 54px;
            height: 16px;
            /* background: #000; */
            color: #fff;
            /* border: 1px solid #fff; */
        }
        
        .item_list li:nth-child(2) {
            margin-left: 12px;
            width: 208px;
            height: 78px;
            /* background: red; */
        }
        
        .item_title {
            color: #000;
            box-sizing: border-box;
            width: 100%;
            height: 22px;
        }
        
        .address {
            display: inline-block;
            box-sizing: border-box;
            margin-top: 6px;
            /* width: 100%; */
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 4px;
            color: #484848;
            background: #ccc;
        }
        
        .li_bottom {
            box-sizing: border-box;
            margin-top: 6px;
            width: 100%;
            line-height: 18px;
            height: 18px;
            clear: both;
            color: #666;
        }
        
        .li_bottom span {
            float: left;
            margin-left: 8px;
        }
        
        .li_bottom span:nth-child(2) {
            float: right;
            margin-right: 8px;
            /* background: red; */
        }
    </style>
</head>



<body style="font-size:12px">
    按天数或几晚进行搜索：<input type="text" name="title" id="title"> <button id="search">搜索</button> <br/>按价格进行搜索：
    <input type="text" name="price" id="price"> <button id="query">查询</button>
    <main id="main">
        <!-- <ul class="item_list">
            <li>
                <a href="#">
                    <img src="https://pic.51houniao.com/f5f3be8c3bb3487ca3bce0d7aa669f00.jpg" alt="图片">
                    <p class="likes">
                        <span class="iconfont icon-like">350</span>
                    </p>
                </a>
            </li>
            <li>
                <div class="item_title">捷匈奥，幸福在这伸了个懒腰</div>
                <p class="address">
                    <span class="iconfont icon-address"></span>奥地利,捷克,匈牙利
                </p>
                <div class="li_bottom">
                    <span><span class="iconfont icon-shijian"></span>11天9晚</span><span><span class="iconfont icon-qianyue"></span>25061元起</span>
                </div>
            </li>
        </ul> -->
    </main>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/flexible.js"></script>
    <script type="text/javascript">
        // var data = {};

        var datalist = [];

        function fn() {

            return $.getJSON('./houniao.json', data => {
                for (let i = 0; i < data.length; i++) {
                    datalist.push(data);
                }
            });
        }
        fn();
        // console.log(data);
        console.log(datalist.length);
        // console.log(data);
        // var datalist = [{
        //     "productId": "1fdab5ebeb9644359f296c9697aab32a",
        //     "proNO": "20160721232153948771",
        //     "proTitle": "捷匈奥，幸福在这伸了个懒腰",
        //     "proPicUrl": "https://pic.51houniao.com/f5f3be8c3bb3487ca3bce0d7aa669f00.jpg",
        //     "collectionNum": 350,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 25061.00,
        //     "routingDat": 11,
        //     "routingNigth": 9,
        //     "country": "奥地利,捷克,匈牙利",
        //     "top": 0,
        //     "createTime": "2018-02-26 12:36:17",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "c0aa0580b39d4c63aa07858e3ea70464"
        // }, {
        //     "productId": "e65d4e2cfdb341a8aee2a8b777607ffe",
        //     "proNO": "20201028183340166325",
        //     "proTitle": "边城风光 芒市瑞丽腾冲温泉",
        //     "proPicUrl": "https://pic.51houniao.com/9b94ee4cbc6a47ebb019f28b6ff823d1.jpg",
        //     "collectionNum": 2,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 12241.00,
        //     "routingDat": 6,
        //     "routingNigth": 5,
        //     "country": "云南省",
        //     "top": 0,
        //     "createTime": "2020-10-28 18:33:41",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "4681f1750d9440649ea581162d402921"
        // }, {
        //     "productId": "4673c5c614534980b7647cf205e7a33b",
        //     "proNO": "20170418213113818391",
        //     "proTitle": "世界大同理想 住在英国乡村",
        //     "proPicUrl": "https://pic.51houniao.com/dec673895c4d4ac198366aafa2f010b7.jpg",
        //     "collectionNum": 625,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 27657.00,
        //     "routingDat": 11,
        //     "routingNigth": 9,
        //     "country": "英国",
        //     "top": 1,
        //     "createTime": "2017-04-19 10:33:01",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "0e62196e606b4026921caeaf589dec21"
        // }, {
        //     "productId": "2d8620b81f46413893f5552066019a95",
        //     "proNO": "20190918100820829778",
        //     "proTitle": "壮美川藏 一生必赴的旅行",
        //     "proPicUrl": "https://pic.51houniao.com/c383b708ed4648ce989024372feca36f.jpg",
        //     "collectionNum": 2,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 10294.00,
        //     "routingDat": 10,
        //     "routingNigth": 10,
        //     "country": "西藏,四川省",
        //     "top": 1,
        //     "createTime": "2019-09-18 10:08:20",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "334e308a92ca4ea98e53c7bfc6347fd7"
        // }, {
        //     "productId": "01e7117c2f9c4694903dd3dc59152ff6",
        //     "proNO": "20161017230726720598",
        //     "proTitle": "非洲之傲 有格调的南非之旅",
        //     "proPicUrl": "https://pic.51houniao.com/2e58e251ecbb455caeef7ef0a6b981c5.jpg",
        //     "collectionNum": 257,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 41997.00,
        //     "routingDat": 11,
        //     "routingNigth": 8,
        //     "country": "南非",
        //     "top": 2,
        //     "createTime": "2017-11-10 18:09:21",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "b47a54e98a00425e9eefc3378abc8497"
        // }, {
        //     "productId": "c7c10aaf4cbb48aabb9bb90d31771ea1",
        //     "proNO": "20190705202202813828",
        //     "proTitle": "经典滇藏 一路朝圣",
        //     "proPicUrl": "https://pic.51houniao.com/62420a40ff7f4e3ab3b1ffb780da7f91.jpg",
        //     "collectionNum": 3,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 9944.00,
        //     "routingDat": 8,
        //     "routingNigth": 8,
        //     "country": "西藏,云南省",
        //     "top": 2,
        //     "createTime": "2019-07-05 20:22:03",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "2920e92649594f53bde980a46911bde4"
        // }, {
        //     "productId": "da0ea6658e2c4d2d9e70943d9654a920",
        //     "proNO": "20200120094803705369",
        //     "proTitle": "荒凉极致 美到极致的新藏线",
        //     "proPicUrl": "https://pic.51houniao.com/c4f37fd9955a4aa4ae924b1bbe8095e8.jpg",
        //     "collectionNum": 7,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 13305.00,
        //     "routingDat": 11,
        //     "routingNigth": 9,
        //     "country": "西藏,新疆",
        //     "top": 3,
        //     "createTime": "2020-01-20 09:48:04",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "7c91cfa1afeb4aaa957a4d7b4fd18ccf"
        // }, {
        //     "productId": "1bbdcdda66a1426aa98f0ca992b1a492",
        //     "proNO": "20191115102208900511",
        //     "proTitle": "坦桑  东非草原的温柔梦乡",
        //     "proPicUrl": "https://pic.51houniao.com/a9cf3a9d672a4dcbaa62424432726c4e.jpg",
        //     "collectionNum": 4,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 29650.00,
        //     "routingDat": 11,
        //     "routingNigth": 9,
        //     "country": "坦桑尼亚",
        //     "top": 3,
        //     "createTime": "2019-11-15 10:22:08",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "4e37896ec1404b0ea0cd9ac8e36a8dca"
        // }, {
        //     "productId": "92fce8ad96b94b65a76a3b9fad784641",
        //     "proNO": "20181126200715452710",
        //     "proTitle": "阿里，一山又山，一错再错",
        //     "proPicUrl": "https://pic.51houniao.com/33b8e029b97c46a8a23add80162b2e50.jpg",
        //     "collectionNum": 165,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 13305.00,
        //     "routingDat": 14,
        //     "routingNigth": 11,
        //     "country": "西藏",
        //     "top": 4,
        //     "createTime": "2018-11-26 20:07:16",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "6dcd691ed6c24c3e9b02cd367a3aff12"
        // }, {
        //     "productId": "d2cb1cc0b81543ef9c89815c62dd7f6c",
        //     "proNO": "20190402143831651552",
        //     "proTitle": "法瑞，时尚与田野的完美结合",
        //     "proPicUrl": "https://pic.51houniao.com/381a45aba6894493b62f912fecb0ce71.jpg",
        //     "collectionNum": 1,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 26650.00,
        //     "routingDat": 11,
        //     "routingNigth": 10,
        //     "country": "瑞士,法国",
        //     "top": 4,
        //     "createTime": "2019-04-02 14:38:32",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "304e39c2fa1e4807bd22e0e75ca2c3af"
        // }, {
        //     "productId": "6d285e7d239346ce8b2853cbe0f5e534",
        //     "proNO": "20201019163004450957",
        //     "proTitle": "遇见云南，山与海的浪漫情缘",
        //     "proPicUrl": "https://pic.51houniao.com/e79289b5d52040d5b4b72608c673f443.jpg",
        //     "collectionNum": 3,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 9708.00,
        //     "routingDat": 7,
        //     "routingNigth": 6,
        //     "country": "云南省",
        //     "top": 5,
        //     "createTime": "2020-10-19 16:30:04",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "48ef738601844385975a9c513026b196"
        // }, {
        //     "productId": "97780c47eaa14690a9c3f18055cf956d",
        //     "proNO": "20161017223253805679",
        //     "proTitle": "瑞士滑雪 驰骋铁力士山",
        //     "proPicUrl": "https://pic.51houniao.com/4c78e5ad7ef04df4aceecc99f809afe2.jpg",
        //     "collectionNum": 542,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 24900.00,
        //     "routingDat": 10,
        //     "routingNigth": 8,
        //     "country": "瑞士",
        //     "top": 5,
        //     "createTime": "2017-11-21 14:47:52",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "c5ba1cbf403148f3b02d6648151f8000"
        // }, {
        //     "productId": "94ea7fe747f74de38e9e687f5bdfc69e",
        //     "proNO": "20190422115846445167",
        //     "proTitle": "伊犁，新疆夏日的绝美画卷",
        //     "proPicUrl": "https://pic.51houniao.com/08e06bca5e7c4e7d99ca54f7768c35ce.jpg",
        //     "collectionNum": 6,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 7908.00,
        //     "routingDat": 9,
        //     "routingNigth": 9,
        //     "country": "新疆",
        //     "top": 6,
        //     "createTime": "2019-04-22 11:58:47",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "8040369fc00249379622199835320f17"
        // }, {
        //     "productId": "51ab116c3c774313ab76dfab53ff5cb1",
        //     "proNO": "20161202151826902729",
        //     "proTitle": "美西 璀璨国家公园之路",
        //     "proPicUrl": "https://pic.51houniao.com/3526a82a530c4e97b07708fc84872c23.jpg",
        //     "collectionNum": 200,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 20893.00,
        //     "routingDat": 11,
        //     "routingNigth": 9,
        //     "country": "美国",
        //     "top": 6,
        //     "createTime": "2017-11-16 14:14:51",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "6f0186cc910b4aa6beb7ca939b735996"
        // }, {
        //     "productId": "f9c972cc96a448cc899658b8beff4d25",
        //     "proNO": "20180903190622669834",
        //     "proTitle": "多彩北美 墨古风情之旅",
        //     "proPicUrl": "https://pic.51houniao.com/8fd0460fd67b47a49d125478c795e1c5.jpg",
        //     "collectionNum": 340,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 23662.00,
        //     "routingDat": 10,
        //     "routingNigth": 7,
        //     "country": "墨西哥,古巴",
        //     "top": 7,
        //     "createTime": "2018-09-03 19:06:23",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "fb5b3aec1cf94b9dab93b549eb1dbcd7"
        // }, {
        //     "productId": "9247b2518b774f94a8053d8a5c47df8d",
        //     "proNO": "20160804120312553603",
        //     "proTitle": "毛里求斯打包不走的假日时光",
        //     "proPicUrl": "https://pic.51houniao.com/3c1f277eb16a4c09b6ae25671fec9048.jpg",
        //     "collectionNum": 316,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 21631.00,
        //     "routingDat": 7,
        //     "routingNigth": 5,
        //     "country": "毛里求斯",
        //     "top": 8,
        //     "createTime": "2017-11-21 14:30:37",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "e53c6c63de924993a351de5d2437b3d1"
        // }, {
        //     "productId": "ad794090bf7347c78429f6d7ad4e5f05",
        //     "proNO": "20190704121628316068",
        //     "proTitle": "色达佛国净土 秘境稻城亚丁",
        //     "proPicUrl": "https://pic.51houniao.com/175a493cd28544ebadc4b3f118ab9bf8.jpg",
        //     "collectionNum": 1,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 11339.00,
        //     "routingDat": 7,
        //     "routingNigth": 6,
        //     "country": "四川省",
        //     "top": 8,
        //     "createTime": "2019-07-04 12:16:28",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "32de7dfcaedd4a9db44510fd07c6fdf3"
        // }, {
        //     "productId": "96a8bd3b2950458884357fad6d68a8ac",
        //     "proNO": "20200803114203376266",
        //     "proTitle": "古韵深藏 遇柔情丽江",
        //     "proPicUrl": "https://pic.51houniao.com/63c4adad29754d59a2e512ffae151f26.jpg",
        //     "collectionNum": 1,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 6316.00,
        //     "routingDat": 4,
        //     "routingNigth": 3,
        //     "country": "云南省",
        //     "top": 9,
        //     "createTime": "2020-08-03 11:42:04",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "dab14487d77a4840ae9be61434cec041"
        // }, {
        //     "productId": "2cd1097fd6574b439442197ca06ecb3d",
        //     "proNO": "20200814172600379792",
        //     "proTitle": "拜普陀圣境，寻江南风味",
        //     "proPicUrl": "https://pic.51houniao.com/03c002a339054848b186485abe3525b7.jpg",
        //     "collectionNum": 0,
        //     "sellerUserId": "4bc4027c645343f09a964b5c2e9f875b",
        //     "sellerUserName": "修罗",
        //     "amount": 6676.00,
        //     "routingDat": 5,
        //     "routingNigth": 4,
        //     "country": "浙江省",
        //     "top": 10,
        //     "createTime": "2020-08-14 17:26:00",
        //     "proType": 1,
        //     "reqId": null,
        //     "orderId": null,
        //     "reqNo": null,
        //     "recommendId": "3a6cb8956ad54b868e88bcc6d120ed0e"
        // }]

        // 获取元素
        // var oMain = my$("#main")[0];
        // 获取搜索按钮
        // var oBtn = my$('#search')[0];
        // // 获取查询按钮
        // var query_btn = my$("#query")[0];


        // function show(myarr) {
        //     oMain.innerHTML = "";
        //     myarr.forEach(function(value) {
        //         var oUl = document.createElement("ul");
        //         oUl.innerHTML = '<ul class="item_list"><li><a href="#"><img src="' + value.proPicUrl + '" alt="图片"><p class="likes"><span class="iconfont icon-like">' + value.collectionNum + '</span></p></a></li><li><div class="item_title">' + value.proTitle + '</div><p class="address"><span class="iconfont icon-address"></span>' + value.country + '</p><div class="li_bottom"><span><span class="iconfont icon-shijian"></span>' + value.routingDat + '天' + value.routingNigth + '晚</span><span><span class="iconfont icon-qianyue"></span>' + parseInt(value.amount) + '元起</span></div></li></ul>'
        //         oMain.appendChild(oUl);
        //     })

        // }
        // show(datalist)

        // //按天数或几晚进行搜索
        // oBtn.onclick = function() {
        //         var title = my$("#title")[0].value;
        //         console.log(title);
        //         var newarr = datalist.filter(function(item) {
        //             if (title === (item.routingDat + "天") || title === (item.routingNigth + "晚")) {
        //                 return item;
        //             }
        //         })

        //         if (newarr.length == 0) {
        //             show(datalist)
        //         } else {
        //             show(newarr)
        //         }
        //     }
        //     // 按价格进行查询 查询比文本框内容小的数据
        // query_btn.onclick = function() {
        //     var prices = parseInt(my$("#price")[0].value);
        //     var newarr = [];
        //     datalist.some(function(item) {
        //         if (prices >= item.amount) {
        //             newarr.push(item);
        //         }
        //     })

        //     if (newarr.length == 0) {
        //         show(datalist)
        //     } else {
        //         show(newarr)
        //     }
        // }


        function my$(select) {
            return document.querySelectorAll(select);
        }
    </script>


</body>

</html>